<template>
  <div class="Medevicemap">
    <div id="allmap" v-bind:style="style"></div>
    <section class="main_table">
      <el-table
        v-bind:data="pointTable"
        style="width: 100%;"
        v-bind:header-cell-style="{background: '#1f2548',color:'#fff'}"
        v-bind:row-style="{height:'0'}"
        v-bind:cell-style="{padding:'0'}"
        fit
      >
        <el-table-column prop="deviceID" align="center" label="设备编号" max-width="150"></el-table-column>
        <el-table-column prop="abnormalDevice" align="center" label="设备状态" max-width="150"></el-table-column>
        <el-table-column prop="serviceTime" align="center" label="服务时间" max-width="150"></el-table-column>
        <el-table-column prop="latitude" align="center" label="经度" max-width="150"></el-table-column>
        <el-table-column prop="longitude" align="center" label="经度" max-width="150"></el-table-column>
        <el-table-column
          prop="registered"
          label="在线状态"
          max-width="150"
          :formatter="registeredFormatter"
        ></el-table-column>
      </el-table>
    </section>
    <transition name="el-fade-in-linear">
      <div v-show="show" class="transition-box pop" v-bind:style="popStyle">
        <el-button icon="el-icon-close" v-on:click="popHide" circle></el-button>
        <h3>设备信息</h3>
        <ul>
          <li v-for="item in popData" v-bind:key="item.name">
            <label>{{item.cn}}:</label>
            <span>{{item.value}}</span>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/suballdevice/alldevicemap.js"></script>

<style lang="scss">
.Medevicemap {
  flex: 1;
  padding: 2px 16px;
  display: flex;
  flex-flow: column;
  #allmap {
    border-radius: 5px;
  }
  .pop {
    position: absolute;
    z-index: 10;
    border-radius: 10px;
    background-color: #fff;
    padding: 16px;
    .el-button {
      background: none;
      padding: 0;
      border: 0;
      position: absolute;
      right: 16px;
      top: 16px;
      color: #000;
      font-size: 24px;
    }
    h3 {
      color: #000;
      text-align: center;
      font-size: 24px;
      margin-top: -6px;
      margin-bottom: 8px;
      padding: 5% 0%;
      width: 100%;
      border-bottom: 1px solid #727785;
    }
    ul li {
      color: #000;
      padding: 8px 0;
      font-size: 16px;
      label {
        display: inline-block;
        min-width: 100px;
      }
    }
  }
  > section {
    &.main_table {
      margin-top: 1%;
    }
  }
}
</style>
